import { memo } from 'react';
import type { ReactNode, FC } from 'react';
import { SongsItemWrapper } from './style';
import { numberFormat } from '@/utils/format';
import { getAllSongs, getRanking, getSongDetail } from '@/service';
import { useAppDispatch } from '@/store/hooks';
import { changeSongs } from '@/views/player/store/player';
import { Link } from 'react-router-dom';
import { setCurrentSongs, setKind } from '@/views/detail/store/detail';
interface IProps {
  children?: ReactNode;
  playCount: number;
  picUrl: string;
  name: string;
  tips: string;
  id: number;
}

const SongsItemV1: FC<IProps> = (props) => {
  const { playCount, picUrl, name, tips, id } = props;
  const dispatch = useAppDispatch();

  let newPlayCount = numberFormat(playCount);
  async function handleClick() {
    const res: any = await getAllSongs(id);
    dispatch(changeSongs(res.songs));
  }

  async function handleRedirectClick() {
    const res: any = await getRanking(id);
    dispatch(
      setCurrentSongs({
        playlist: res.playlist,
        size: res.playlist.trackCount,
        playCount: res.playlist.playCount,
        songs: res.playlist.tracks,
        id: res.playlist.id,
      })
    );
    dispatch(setKind('playlist'));
  }

  return (
    <>
      <SongsItemWrapper>
        <div className="img-top">
          <img src={picUrl} />
          {playCount && (
            <>
              <Link className="sprite_cover" to="/detail" onClick={handleRedirectClick}></Link>
              <div className="button sprite_cover">
                <i className="sprite_icon"></i>
                <span>{newPlayCount}</span>
                <a className="sprite_icon" onClick={handleClick}></a>
              </div>
            </>
          )}
        </div>
        <div className="text-buttom">
          <a href="javascript:void(0)">{name}</a>
          {tips && <span>{tips}</span>}
        </div>
      </SongsItemWrapper>
    </>
  );
};

export default memo(SongsItemV1);
